<template>
	<div>
		<u-navbar :is-back="true" title="新增报告" back-icon-color="#ffffff" :background="{backgroundColor:'#E62131'}"
			title-color="#ffffff"></u-navbar>
		<view class="centers">
			<view class="lsittitles fliexs">
				<view class="rigous"></view>
				<span class="xinxis">课程信息</span>
			</view>
		</view>
		<view class="teltlfts">
			<view class="listta">
				<span class="kename">课程名称</span> <span class="infos">{{items.className}}</span>
			</view>
			<view class="listta">
				<span class="kename">上课时间</span> <span class="infos">{{items.classYear || ''}}-{{items.classDate || ''}}
					{{items.classStartTime || ''}}-{{items.classEndTime || ''}}</span>
			</view>
		</view>
		<view class="centers">
			<view class="lsittitles fliexs">
				<view class="rigous"></view>
				<span class="xinxis">课程总结</span>
			</view>
		</view>
		<view class="teltlfts" style="padding-right: 30rpx;">
			<u-input v-model="classroomReport" :type="type" :border="border" :height="height"
				:auto-height="autoHeight" />
		</view>
		<view class="" style="display: flex;align-items: center;justify-content: flex-end;padding-right: 30rpx;">
			<u-upload :action="action" :header="header" :file-list="fileList" @on-success="onsuccess"></u-upload>
		</view>
		<view class="bgfenge"></view>
		<view class="">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#E62131"></u-tabs>
		</view>
		<view class="padingist" v-if="current == 0">
			<view class="" v-for="(item,index) in items.studentWorkList" :key="index">
				<view class="fliexs" style="padding: 20rpx">
					<image style="width: 50rpx;height: 50rpx;" src="../../static/images/logo.png" mode=""></image>
					<span style="padding: 0 12rpx;">{{item.studentName}}</span>
					<!-- <span>未上课</span> -->
				</view>
				<view class="centers">
					<view class="lsittitles fliexs">
						<view class="rigous"></view>
						<span class="xinxis">学生表现</span>
					</view>
				</view>
				<view class="teltlfts">
					<view class="listta" v-for="(ims,idx) in item.score" :key="idx">
						<span class="kename">{{ims.name}}</span> <u-rate :count="count" v-model="ims.score"></u-rate>
					</view>
				</view>
				<view class="centers">
					<view class="lsittitles fliexs">
						<view class="rigous"></view>
						<span class="xinxis">老实评语</span>
					</view>
				</view>
				<view class="teltlfts" style="padding-right: 30rpx;">
					<u-input v-model="item.comment" :type="type" :border="border" :height="height"
						:auto-height="autoHeight" />
				</view>
				<view class=""
					style="display: flex;align-items: center;justify-content: flex-end;padding-right: 30rpx;">
					<u-upload :action="action" :header="header" :file-list="item.fileList"
						@on-success="onsuccesslist($event,index)"></u-upload>
				</view>
			</view>
		</view>
		<view class="padingist" v-if="current == 1">
			<view class="topps fliexs space_between">
				<span>选择学员（0/{{items.studentWorkList.length}}）</span>
				<span> <span style="padding-right: 10rpx;" @click="clicjlsier"> 清空 </span> <span @click="checkedAll"> 全选 </span> </span>
			</view>
			<view class="">
				<!-- <u-checkbox-group>
					<u-checkbox shape="circle" 
						v-for="(item, index) in items.studentWorkList" :key="index" v-model="item.checked" @change="checkboxChange($event,index)"
						:name="item.studentName">{{item.studentName}}</u-checkbox>
				</u-checkbox-group> -->
				<u-checkbox-group @change="checkboxGroupChange">
					<u-checkbox shape="circle" @change="checkboxChange($event,index)" 
						v-for="(item, index) in items.studentWorkList" :key="index" v-model="item.checked"
						:name="item.studentName">{{item.studentName}}</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="centers">
				<view class="lsittitles fliexs">
					<view class="rigous"></view>
					<span class="xinxis">学生表现</span>
				</view>
			</view>
			<view class="teltlfts">
				<view class="listta" v-for="(ims,idx) in score" :key="idx">
					<span class="kename">{{ims.name}}</span> <u-rate :count="count" v-model="ims.score"></u-rate>
				</view>
			</view>
			<view class="centers">
				<view class="lsittitles fliexs">
					<view class="rigous"></view>
					<span class="xinxis">老实评语</span>
				</view>
			</view>
			<view class="teltlfts" style="padding-right: 30rpx;">
				<u-input v-model="textlsit" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
			</view>
			<view class=""
				style="display: flex;align-items: center;justify-content: flex-end;padding-right: 30rpx;">
				<u-upload :action="action" :header="header" :file-list="minifileList"
					@on-success="twosuccesslist($event,index)"></u-upload>
			</view>


		</view>

		<view class="bneads w-btn-fixed">
			<div class="btnlst fliexs space_between">
				<view class="btn_left center">
					清空
				</view>
				<view class="btn_left right" @click="okllists">
					确定
				</view>
			</div>

		</view>
	</div>
</template>

<script>
	import staticUrl from "@/common/config.js"
	export default {
		data() {
			return {
				listred: [{
						name: 'apple',
						checked: false,
						disabled: false
					},
					{
						name: 'banner',
						checked: false,
						disabled: false
					},
					{
						name: 'orange',
						checked: false,
						disabled: false
					}
				],
				list: [{
					name: '评价学员'
				}, {
					name: '批量评价'
				}],
				count: 5,
				current: 0,
				action: staticUrl.staticUrl,
				header: {
					accessToken: 'bearer ' + uni.$func.cache("token"),
				},
				fileList: [],
				imglsit: [],
				minifileList: [],
				ImgList:[],
				value: 5,
				type: 'textarea',
				border: true,
				height: 150,
				autoHeight: true,
				items: null,

				classroomReport: "",
				score:[{
					"name": "学习态度",
					"score": 0
				}, {
					"name": "技术掌握",
					"score": 0
				}, {
					"name": "日常表现",
					"score": 0
				}, {
					"name": "团队意思",
					"score": 0
				}, {
					"name": "身体素质",
					"score": 0
				}],
				textlsit:"",
			}
		},
		onLoad(option) {
			setTimeout(()=>{
				this.items = JSON.parse(option.item);
				this.classroomReport = this.items.classroomReport
				if(this.items.classroomImg){
					this.imglsit = this.items.classroomImg.split(',')
					this.imglsit.forEach((elma)=>{
						this.fileList.push[{url:elma}]
					})
				}
				if(this.items.studentWorkList){
					this.items.studentWorkList.forEach((ims) => {
						ims.checked = false;
						ims.fileList = [];
						
						if(ims.commentImg){
							ims.commentImg = ims.commentImg.split(',')
							ims.commentImg.forEach((elma)=>{
								ims.fileList.push({url:elma})
							})
						}else{
							ims.commentImg = [];
						}
						if (!ims.score) {
							ims.score = [{
								"name": "学习态度",
								"score": 0
							}, {
								"name": "技术掌握",
								"score": 0
							}, {
								"name": "日常表现",
								"score": 0
							}, {
								"name": "团队意思",
								"score": 0
							}, {
								"name": "身体素质",
								"score": 0
							}];
						}else{
							ims.score = JSON.parse(ims.score)
						}
					
					})
				}
			},500)
			
			console.log(this.items)
		},
		methods: {
			okllists() {
				let arrs = this.items.studentWorkList;
				let arsss = [];
				if(this.current == 1){
					arrs.forEach((ims,index) => {
						if(ims.checked){
							ims.commentImg = this.ImgList.join(',');
							ims.score = JSON.stringify(this.score);
							arsss.push(ims)
						}
					})
					arrs = arsss
				}else{
					arrs.forEach((ims) => {
						ims.commentImg = ims.commentImg.join(',');
						ims.score = JSON.stringify(ims.score);
					})
					
				}
				let objs = {
					"id": this.items.id,
					"classroomImg": this.imglsit.join(','),
					"classroomReport": this.classroomReport,
					"studentWorks": arrs
				}
				uni.$api.common.updatecommentworkout(objs).then((res) => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
								delta:1,
						})
					},2000)
				});
			},
			onsuccesslist(e, index) {
				uni.showToast({
					title: "图片上传成功",
					icon: 'none'
				})
				this.items.studentWorkList[index].commentImg.push(e.result.path)

			},
			twosuccesslist(e) {
				uni.showToast({
					title: "图片上传成功",
					icon: 'none'
				})
				this.ImgList.push(e.result.path)

			},
			onsuccess(e) {
				uni.showToast({
					title: "图片上传成功",
					icon: 'none'
				})
				this.imglsit.push(e.result.path)

			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e,index) {
				this.items.studentWorkList[index].checked = e.value
				this.$forceUpdate()
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				// console.log(e);
			},
			clicjlsier() {
				this.items.studentWorkList.map(val => {
					val.checked = false;
				})
				this.$forceUpdate()
			},
			checkedAll() {
				this.items.studentWorkList.map(val => {
					val.checked = true;
				})
				this.$forceUpdate()
			},
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss">
	.centers {
		padding: 20rpx;
	}

	.lsittitles {
		.rigous {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #E62131;
		}

		.xinxis {
			padding-left: 20rpx;
			font-weight: bold;
		}
	}

	.teltlfts {
		padding-left: 70rpx;
		margin-bottom: 20rpx;

		.listta {
			line-height: 60rpx;

			.kename {
				color: #b1b1b1;
				padding-right: 20rpx;
			}
		}
	}




	.btnlst {
		// margin-top: 350rpx;

		.btn_left {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #b1b1b1;
			border: 1rpx solid #e1e1e1;
		}

		.right {
			background-color: #E62131;
			color: #ffffff;
		}
	}

	.bgfenge {
		width: 100%;
		height: 10rpx;
		background-color: #f4f4f4;
	}

	.padingist {
		padding: 10rpx 30rpx 120rpx;
	}

	.topps {
		color: #b1b1b1;
		padding: 20rpx 0;
	}
</style>